<template>
  <div class="home">
    <div class="title">
      <span>todos</span>
    </div>
    <div class="todos">
      <div class="todos-title">
        <input class="allcheck" type="checkbox" @click="allCheck" :checked="allChecked">
        <input v-model="inputValue" @keyup.enter="addTodos" class="input-todos" type="text" placeholder="按回车键添加事件">
      </div>
      <div class="todos-list">
        <div class="todos-item" v-for="(item,index) in showTodos" :key="item.id">
          <input class="item-check" type="checkbox" @click.stop="itemCheckChange(index)" :checked="item.status">
          <div class="item-box" @dblclick.capture="editItem($event,index)">
            <span v-if="edititem!=index" class="item-text" >{{item.text}}</span>
            <input v-else class="text-change" type="text" @blur="turnTo($event,index)" :value="item.text" >
          </div>
          <span @click="deleteItem(index)" class="item-delete">删除</span>
        </div>
      </div>
      <div class="todos-bottom">
        <div class="todos-com">
          <span class="com1">已完成</span>
          <span>{{done}}</span>
          <span class="com-line">/</span>
          <span>{{total}}</span>
        </div>
        <div class="todos-dis">
          <span @click.stop="showItem('all')">全部</span>
          <span @click.stop="showItem('doing')">进行中</span>
          <span @click.stop="showItem('done')">已完成</span>
        </div>
        <div class="todos-clear">
          <span @click="deleteDone">删除已完成</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // @ is an alias to /src
  // import HelloWorld from '@/components/HelloWorld.vue'
  import { mapGetters } from "vuex";

  export default {
    data(){
      return {
        edititem:-1,
        inputValue:'',
      }
    },
    computed:{
      ...mapGetters(['allChecked','done','total','showTodos'])
    },
    methods:{
      deleteDone(){
        this.$store.commit('deleteDone');
      },
      addTodos:function(){
        if (!this.inputValue) {
          this.$message({
            message: "输入不能为空！",
            type: "warning",
          });
          return false;
        }
        this.$store.commit({
          type:'addTodos',
          payload:{
            text: this.inputValue,
            status: false,
            id: Date.now(),
          }
        })
        this.inputValue='';
      },
      allCheck(){
        let allC=!this.allChecked;
        this.$store.commit('allCheck',allC)
      },
      deleteItem(i){
        this.$store.commit("deleteItem",i)
      },
      editItem(e,i){
        this.edititem=i;
        let p=e.target.parentElement;
        setTimeout(function () {
          p.lastChild.focus();
        },10)
      },
      turnTo(e,i){
        this.edititem=-1;
        if(this.showTodos[i]["text"]===''){
          this.$store.commit('turnTo',i);
        }else{
          this.$store.commit('changeItem',{index:i,text:e.target.value});
        }
        // console.log(this.$store.state)
        // console.log(e.target.value)
      },
      showItem(val){
        this.$store.commit('showItem',val);
      },
      itemCheckChange(i){
        // console.log(this.$store.state)
        // console.log(this.showTodos[i]["status"])
        let self=this;
        setTimeout(function () {
          self.$store.commit('itemCheckChange',{index:i,check:self.showTodos[i]["status"]})
        },10)
      }
      //v-model可以修改vuex中的数据，但是不会提交，也不会修改persist中的历史
    },
  }
</script>
<style lang="less" scoped>
  .title{
    width: 500px;
    height: 150px;
    text-align: center;
    margin: 100px auto 0;
    span{
      line-height: 100px;
      font-size: 50px;
      color: coral;
    }
  }
  .todos{
    width: 500px;
    margin: 0 auto;
    .todos-title{
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .allcheck{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-left: 20px;
      }
      .input-todos{
        width: 400px;
        height: 30px;
        text-indent: 20px;
        margin-right: 20px;
      }
    }
    .todos-list{
      .todos-item{
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        .item-check{
          width: 30px;
          height: 30px;
          margin-left: 20px;
        }
        .item-box{
          margin-right: 20px;
          .item-text{
            display: block;
            width: 400px;
            height: 30px;
            line-height: 30px;
          }
          .text-change{
            width: 400px;
            height: 30px;
            text-indent: 20px;
          }
        }
        .item-delete{
          position: absolute;
          width: 80px;
          height: 30px;
          background: red;
          color: aliceblue;
          line-height: 30px;
          text-align: center;
          display: none;
          right: 0;
        }
      }
      .todos-item:hover{
        .item-delete{
          display: block;
        }
      }
    }
    .todos-bottom{
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .todos-com{
        .com1{
          margin-right: 10px;
        }
        .com-line{
          margin: 0 10px;
        }
      }
      .todos-dis{
        span{
          margin: 0 10px;
        }
      }
      .todos-clear{

      }
    }
  }
</style>

